import React, { useState } from 'react'
import MyNavBar from '../../components/MyNavBar/MyNavBar'
import { CameraOutline } from 'antd-mobile-icons'
import {
  Form,
  Input,
  Button,
  Modal,
} from 'antd-mobile'
import imag from '../../img/1.jpg'

function Index() {
  // const [visible, setVisible] = useState(false)
  const onFinish = (values) => {

  }

  //弹出文件选择
  const handelZj = () => {
    const input = document.createElement('input')

    input.click()
    setVisible(true)
  }

  return (
    <div>
      <MyNavBar title='新增乘客'></MyNavBar>
      <Button
        block
        color='success' size='large' fill='none'
        onClick={() => {
          Modal.alert({
            image: imag,
            title: '识别身份证',
            content: '',
          })
        }}
      >
        <CameraOutline />扫描证件添加
      </Button>
      <div>
        <Form
          onFinish={onFinish}
          layout='horizontal'
          footer={
            <Button block type='submit' color='success' size='large' shape='rounded'>
              提交
            </Button>
          }
        >
          <Form.Item
            name='type'
            label='乘客类型'
            rules={[{ required: true, message: '乘客类型不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入乘客类型' />
          </Form.Item>
          <Form.Item
            name='name'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='code'
            label='证件类型'
            rules={[{ required: true, message: '证件类型不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入证件类型' />
          </Form.Item>
          <Form.Item
            name='codephone'
            label='证件号码'
            rules={[{ required: true, message: '证件号码不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入证件号码' />
          </Form.Item>
          <Form.Item
            name='phone'
            label='手机号码'
            rules={[{ required: true, message: '手机号码不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入手机号码' />
          </Form.Item>
          <Form.Item>
            <p style={{ fontSize: '12px' }}>为配合疫情防控工作，需要提供每名乘客的<span style={{ color: 'red', fontSize: '16px' }}>本人手机号</span>，老人或无手机号的乘客，可填写亲友手机号</p>
          </Form.Item>
          <p style={{ fontSize: '12px', textAlign: 'center' }}>本地购票服务由票务提供</p>
        </Form>
      </div>
      {/* <div>
        <Modal
          visible={visible}
          content='人在天边月上明'
          img=''
          closeOnAction
          onClose={() => {
            setVisible(false)
          }}
          actions={[
            {
              key: 'confirm',
              text: '我知道了',
            },
          ]}
        />
      </div> */}
    </div>
  )
}

export default Index
